<template>
  <Card class="login-wrap" :bordered="false">
    <div class="title" slot="title">
      <img src="../../assets/admin/img/logo.png"/>
      <h2 class="title">后台管理系统</h2>
    </div>
    <i-form class="login-form" ref="loginForm" :model="formData" :rules="rules">
      <Form-item prop="login_name">
        <i-input type="text" size="large" v-model="formData.login_name" placeholder="用户名">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </i-input>
      </Form-item>
      <Form-item prop="password">
        <i-input type="password" size="large" v-model="formData.password" placeholder="密码">
          <Icon type="ios-locked-outline" slot="prepend"></Icon>
        </i-input>
      </Form-item>
      <Form-item prop="password">
        <Row>
          <i-col span="14">
            <i-input type="text" size="large" v-model="formData.auth_code" placeholder="验证码">
            </i-input>
          </i-col>
          <i-col span="10" class="auth-code-wrap">
            <img class="auth-code" :src="authCodeImg" @click="changeImg()"/>
          </i-col>
        </Row>
      </Form-item>
      <Form-item>
        <Button type="primary" size="large" long @click="login('loginForm')">登录</Button>
      </Form-item>
    </i-form>
  </Card>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        authCodeImg: `/api/authCodeImg?${Math.random()}`,
        formData: {
          login_name: '',
          password: '',
          auth_code: ''
        },
        rules: {
          login_name: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
          auth_code: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
        }
      }
    },
    methods: {
      login () {
        this.$ajax.post({
          url: '/api/login',
          data: this.formData,
          success: () => {
            let {protocol, host} = location
            location.href = `${protocol}//${host}/index`
          },
          fail: (msg) => {
            this.$Message.warning(msg)
            this.authCodeImg = `/api/authCodeImg?${Math.random()}`
            this.formData.auth_code = ''
          }
        })
      },
      changeImg () {
        this.authCodeImg = `/api/authCodeImg?${Math.random()}`
      }
    }
  }
</script>

<style lang="less">
  @import '../../assets/admin/styles/variable.less';
  html, body {
    width: 100%;
    height: 100%;
    background-color: @c_bg;
  }

  .login-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);

    .ivu-card-head {
      text-align: center;
      border-bottom: 1px solid @c_border;
    }

    .title {
      display: inline-block;
      margin: 0 auto;

      img {
        width: 40px;
        height: 40px;
        vertical-align: middle;
      }
      h2 {
        display: inline-block;
        color: @c_bg;
        vertical-align: middle;
      }
    }

    .login-form {
      width: 380px;
    }

    input {
      border-color: @c_border;
    }
    .auth-code-wrap{
      height: 36px;
    }
    .auth-code {
      width: 140px;
      height: 34px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
</style>
